<template>
<div>
  <!--    面包屑导航区-->
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>数据统计</el-breadcrumb-item>
    <el-breadcrumb-item>数据报表</el-breadcrumb-item>
  </el-breadcrumb>

  <!--卡片视图区-->
  <el-card>
    <div id="myEcharts">

    </div>
  </el-card>
</div>
</template>

<script>
//echarts使用步骤：
/*
* 0.js的数据可视化图形库
* 1.安装，导入echarts
* 2.为echarts准备一个容器
* 3.初始化echarts实例：let myEcharts=echarts.init(document.getElementById('myEcharts'))
* 4.配置配置项：myEcharts.setOption（{}）
* */
//注意这里引入的时候要写全
import * as echarts from 'echarts'
//js的工具库【_.merge(obj1,obj2)  返回一个合并的对象】
import _ from 'lodash'

export default {
  name: "Reports",
  data(){
    return{
      //服务器获取到的data
      data:{},
      //需要合并的配置
      options: {
        title: {
          text: '用户来源'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#E9EEF3'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ]
      },
      //最终对象
      a:{}
    }
  },
  //获取数据
  created() {
    // this.$http.get('reports/type/1').then(res=>{
    //   this.data=res.data.data
    //   this.a=_.merge(this.data,this.options)
    //   // console.log(this.a)
    // })
  },
  //这里只能用mounted【DOM元素页面元素渲染完毕】
  mounted() {
    this.$http.get('reports/type/1').then(res=>{
      this.data=res.data.data
      //合并数据到最终的a身上【data和options配置项】
      this.a=_.merge(this.data,this.options)
      //准备一个容器
      let myEcharts=echarts.init(document.getElementById('myEcharts'))
      //配置
      myEcharts.setOption(this.a);
      console.log(this.a)
    })

  }
}
</script>

<style scoped>
#myEcharts{
  /*border: 1px black solid;*/
  width: 80%;
  height: 400px;
}
</style>